<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>顶部导航条</title>
  <link rel="stylesheet" href="../css/reset.css" type="text/css">
  <style>
    .topbar{
      height: 30px;
      background-color: #CECECE;
    }

    .container{
      width: 1190px;
      margin: 0 auto;
    }

    .topbar .container .welcome{
      /*行内元素可以像处理文本一样处理*/
      line-height: 30px;
      height: 30px;
    }

    .welcome{
      font-size: 0;
      color: #666;
    }

    .welcome span,.welcome a{
      /*消除元素之间间隙*/
      font-size: 12px;
    }

    .hello{
      margin-right: 28px;
    }

    .welcome .login{
      padding-right: 10px;
      border-right: 1px solid #666;
    }

    .welcome .register{
      margin-left: 10px;
    }


    .top-nav{
      color: #666;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }
    .top-nav .list li{
      float: left;
    }


    .top-nav .list li a{
      padding: 0 15px;
      border-right: 1px solid #666;
    }

    .top-nav .list li:first-child a{
      padding-left: 0;

    }

    .top-nav .list li:last-child a{
      border-right: none;
      padding-right: 0;
    }

  </style>
</head>
<body>
<!--顶部-->
<div class="topbar">
  <div class="container clearfix ">
    <div class="welcome leftfix">
      <span class="hello">尚品汇欢迎您</span>
      <span>请</span>
      <a href="#" class="login">登录</a>
      <a href="#" class="register">免费注册</a>
    </div>

    <div class="top-nav rightfix">
      <ul class="list">
        <li><a href="#">我的订单</a></li>
        <li><a href="#">我的购物车</a></li>
        <li><a href="#">我的尚品汇</a></li>
        <li><a href="#">尚品汇会员</a></li>
        <li><a href="#">企业采购</a></li>
        <li><a href="#">关于尚品汇</a></li>
        <li><a href="#">合作招商</a></li>
        <li><a href="#">商家后台</a></li>
      </ul>
    </div>

  </div>
</div>

</body>
</html>
